<!-- 侧边栏背景层 -->
<template>
  <div class="aside-template background-container">
    <div class="title">背景</div>
    <div class="pure">
      <ul>
        <li>
          <div class="item">
            <!-- 色盘 -->
            <el-color-picker
              color-format="hex"
              popper-class="color-picker-button-hidden"
              v-model="color"
              @active-change="onActiveChange"
            />
          </div>
        </li>
        <li v-for="item of pure" :key="item">
          <div class="item" :style="{background: item}" @click="onActiveChange(item)" />
        </li>
      </ul>
    </div>
    <div class="list">
      <ul>
        <li v-for="item of pics" :key="item.src">
          <el-image
            :src="item.src + '?x-oss-process=image/resize,w_176,h_176,m_fill/interlace,1,image/format,webp'"
            @click="onSetBackPic(item)"
          />
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { STORE_NAMESPACE } from '../../../../config'
import { mapState } from 'vuex'
export default {
  name: 'DesignAsideBackground',
  data () {
    return {
      color: '#fa5a53', // 颜色取值
      pure: ['#000000', '#737373', '#D9D9D9', '#FFFFFF', '#A82B2A', '#A86F0E', '#528725', '#191F8B', '#49188B', '#E65354', '#FFD935', '#70BC59', '#607BF4'],
      pics: [{
        src: 'https://st0.dancf.com/csc/310/materials/0/20190914-165039-699e.png',
        color: '#FFF'
      }, {
        src: 'https://st0.dancf.com/csc/310/materials/0/20190914-165330-8204.png',
        color: '#FFF'
      }, {
        src: 'https://st0.dancf.com/csc/310/material-backgrounds/0/20190513-213113-bc56.png',
        color: '#FFF'
      }, {
        src: 'https://st0.dancf.com/csc/310/material-backgrounds/0/20190513-222925-79e8.png',
        color: '#FFF'
      }, {
        src: 'https://st0.dancf.com/csc/310/material-backgrounds/0/20190513-223156-ce0b.png',
        color: '#FFF'
      }, {
        src: 'https://st0.dancf.com/csc/310/material-backgrounds/0/20190514-193203-1401.png',
        color: '#FFF'
      }, {
        src: 'https://st0.dancf.com/csc/310/material-backgrounds/0/20190513-223453-e943.png',
        color: '#FFF'
      }, {
        src: 'https://st0.dancf.com/csc/310/material-backgrounds/0/20190513-223218-572b.png',
        color: '#FFF'
      }],
    }
  },
  computed: {
    ...mapState({
      layouts: state => state[STORE_NAMESPACE].layouts // 拿到画布
    }),
    // 取出背景
    background () {
      return this.layouts.background
    }
  },
  created () {
    this.color = this.background.color || this.color
  },
  methods: {
    // 设置纯色
    onActiveChange (color) {
      // 设置视图的背景部分, 注意对象多层的合并问题
      this.$store.dispatch(`${STORE_NAMESPACE}/setData`, {
        background: {
          ...this.layouts.background,
          color,
          image: null
        }
      }).then(() => {
        this.color = color
      })
    },
    // 设置背景
    onSetBackPic (row) {
      // 同上边的纯色设置
      this.$store.dispatch(`${STORE_NAMESPACE}/setData`, {
        background: {
          ...this.layouts.background,
          color: row.color,
          image: row.src
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.background-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  .pure {
    padding-bottom: 20px;
    ul {
      display: flex;
      flex-wrap: wrap;
    }
    li {
      padding: 2px;
      .item {
        width: 40px;
        height: 40px;
        border: 1px solid #f1f1f1;
        border-radius: 3px;
        overflow: hidden;
      }
      & ::v-deep .el-color-picker__trigger,
      & ::v-deep .el-color-picker { width: 38px; height: 38px;}
      & ::v-deep .el-color-picker__trigger { border: 0; padding: 0;}
      & ::v-deep .el-color-picker__color { border: 0;}
      & ::v-deep .el-icon-arrow-down { display: none;}
      & ::v-deep .el-color-picker__color-inner {
        background: url() center center !important; background-size: cover;
      }
    }
  }
  .list {
    ul {
      display: flex;
      flex-wrap: wrap;
      .el-image {
        display: block;
        cursor: pointer;
      }
      li {
        width: 25%;
        padding: 2px;
      }
    }
  }
}
</style>